<template>
  <div>
    <!-- 使用flex布局使所有控件在一行显示 -->
    <div class="search-container">
      <span class="control-label">企业：</span>
      <el-input 
        v-model="input" 
        placeholder="请输入企业名称" 
        class="control-item enterprise-input">
      </el-input>

      <span class="control-label">时间：</span>
      <div class="time-inputs control-item">
        <el-date-picker 
          v-model="value1" 
          type="daterange" 
          range-separator="至" 
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>

      <el-select v-model="value" placeholder="请选择" class="control-item">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <el-button type="primary" class="control-item">查询</el-button>
      <el-button type="success" class="control-item">重置</el-button>
    </div>

    <el-table 
      :data="tableData" 
      style="width: 100%; margin-top: 15px;"
      class="custom-header">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline>
            <el-row>
              <el-col :span="6">
                <el-form-item label="商品名称">
                  <span>{{ props.row.hrBelongCompany }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属店铺">
                  <span>{{ props.row.shop }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商品 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="店铺 ID">
                  <span>{{ props.row.shopId }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商品分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="店铺地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商品描述">
                  <span>{{ props.row.desc }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="hr所属企业" prop="hrBelongCompany"></el-table-column>
      <el-table-column label="主账号" prop="mainAccount"></el-table-column>
      <el-table-column label="所属行业" prop="belongIndustry"></el-table-column>
      <el-table-column label="营业执照过期时间" prop="expirationTime"></el-table-column>
      <el-table-column label="营业执照状态" prop="state"></el-table-column>
      <el-table-column label="hr操作" prop="operation"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' },
        { value: '选项5', label: '北京烤鸭' }
      ],
      value: '',
      value1: '',
      tableData: [
        {
          id: '12987122',
          hrBelongCompany: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
          mainAccount: 'account1',
          belongIndustry: '食品',
          expirationTime: '2025-12-31',
          state: '有效',
          operation: '编辑'
        },
        {
          id: '12987123',
          hrBelongCompany: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
          mainAccount: 'account2',
          belongIndustry: '食品',
          expirationTime: '2025-12-31',
          state: '有效',
          operation: '编辑'
        }
      ]
    }
  }
}
</script>

<style>
/* 企业输入框样式 */
.enterprise-input {
  width: 250px;
}

/* 表头样式 */
.custom-header ::v-deep .el-table__header th {
  height: 50px;
  font-size: 16px;
  font-weight: bold;
  background-color: #f5f7fa;
}

.custom-header ::v-deep .el-table__header .el-table__cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 搜索区域布局 */
.search-container {
  display: flex;
  align-items: center;
  padding: 15px 0;
}

.control-item {
  margin-right: 15px;
}

.control-label {
  margin-right: 8px;
  white-space: nowrap;
}

/* 最后一个元素去掉右边距 */
.search-container > :last-child {
  margin-right: 0;
}

/* 展开行样式 */
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

/* 表格单元格内容居中 */
.el-table .cell {
  text-align: center;
}
</style>